<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    title="零件详情"
    width="75vw"
    @ok="handleSubmit"
    @close="handleCancel"
    class="drawer-container"
  >
    <Tabs
      type="card"
      v-model:activeKey="activeKey"
      class="tabs-container"
      @change="handleTabChange"
    >
      <!-- 属性页 -->
      <TabPane key="attribute" tab="属性">
        <Row :gutter="[16, 16]" class="content-scroll">
          <!-- 左侧：零件预览 -->
          <Col :span="9">
            <Card hoverable class="scroll-card">
              <Image width="100%" style="border-radius: 10px" :src="currentRecord.partUrl" />
            </Card>
          </Col>

          <!-- 右侧：零件属性 -->
          <Col :span="15">
            <Card class="scroll-card">
              <partDetail
                v-if="showDetail"
                ref="partDetailRef"
                :isUpdate="isUpdate"
                :folderId="folderId"
                :partType="partType"
                :currentRecord="currentRecord"
              />
            </Card>
          </Col>
        </Row>
      </TabPane>

      <!-- 其他 Tabs -->
      <TabPane key="versionShow" tab="版本展示">
        <Card class="scroll-card">
          <versionTable v-if="showDetail" :currentRecord="currentRecord" />
        </Card>
      </TabPane>
      <TabPane key="useSituation" tab="使用情况">
        <Card class="scroll-card">暂无使用记录</Card>
      </TabPane>
      <TabPane key="changeRecord" tab="变更记录">
        <Card class="scroll-card">暂无变更记录</Card>
      </TabPane>
      <TabPane key="processExample" tab="相关流程实例">
        <Card class="scroll-card">
          <flowDesign v-if="showDetail" :currentRecord="currentRecord" />
        </Card>
      </TabPane>
    </Tabs>
  </BasicDrawer>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Tabs, TabPane, Row, Col, Image, Card } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import partDetail from './partDetail.vue';
  import versionTable from '/@/views/demo/partManager/components/versionTable.vue';
  import flowDesign from '/@/views/demo/documentManager/components/flowDesign.vue';

  const { createMessage } = useMessage();

  const activeKey = ref<string>('attribute'); // 详情页签
  const partDetailRef = ref<any>(null); // 引用 partDetail 组件
  const isUpdate = ref<boolean>(false); // 是否是编辑
  const folderId = ref<string>(''); // 文件夹id
  const partType = ref<string>(''); // 文件夹类型
  const currentRecord = ref<any>({}); // 当前记录
  const showDetail = ref<boolean>(false); // 是否显示详情

  // 切换 Tabs
  const handleTabChange = (key: string) => {
    if (key === 'versionShow' || key === 'processExample') {
      showDetail.value = true;
    }
  };

  // 取消
  function handleCancel() {
    activeKey.value = 'attribute';
    closeDrawer();
    setTimeout(() => {
      showDetail.value = false; // 销毁 partDetail 子组件
    }, 300); // 动画时间，与你的 Drawer 动画保持一致
  }

  // 提交（获取所有表单数据）
  const handleSubmit = async () => {};

  // 初始化数据
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;
    folderId.value = data?.FolderId;
    partType.value = data?.partType;
    currentRecord.value = data?.currentRecord;
    showDetail.value = true; // 显示子组件
  });
</script>

<style lang="less" scoped>
  /* 让整个 Drawer 内部可以滚动 */
  .drawer-container {
    height: 90vh;
    overflow: hidden;
  }

  /* 让 Tabs 内部可以滚动 */
  .tabs-container {
    height: 100%;
  }

  /* 滚动区域 */
  .content-scroll {
    height: calc(80vh - 60px);
    overflow-y: auto;
    padding-right: 10px;
  }

  /* 卡片滚动 */
  .scroll-card {
    height: 100%;
    overflow-y: auto;
    max-height: 80vh;
  }

  /* 表单滚动 */
  .form-container {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
  }

  /* 每个零件类型的部分 */
  .part-section {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
  }
</style>
